import { Table } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'umi';
import { tableLocale } from '@/tool/components/PageEmpty';
import { LOCKED_TYPE } from '../../../../constant/enums';

import styles from './index.less';

const { Column, ColumnGroup } = Table;

const TableLimitStatus = ({ unitPowerLimitList }) => {
  const [dataSource, setDataSource] = useState([]),
    [loading, setLoading] = useState(false),
    [columnData, setColumnData] = useState([]);

  useEffect(() => {
    setLoading(true);
    try {
      let columnData = [],
        dataSource = Array.from({ length: 24 }, (_, index) => ({}));
      unitPowerLimitList.forEach(({ unitId, unitTitle, unitHourList }) => {
        columnData.push({ unitId, unitTitle });
        unitHourList.forEach(({ sellPowerLimit, buyPowerLimit, hourOrder, lockedTradeType }) => {
          dataSource[hourOrder - 1][`${unitId}_buyLimit`] = buyPowerLimit?.toFixed(3) || '-';
          dataSource[hourOrder - 1][`${unitId}_sellLimit`] = sellPowerLimit?.toFixed(3) || '-';
          dataSource[hourOrder - 1][`${unitId}_lockedType`] = lockedTradeType;
          if (!dataSource[hourOrder - 1].hourOrder) {
            dataSource[hourOrder - 1].hourOrder = hourOrder;
          }
        });
      });
      setColumnData(columnData);
      setDataSource(dataSource);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  }, [unitPowerLimitList]);

  const tableBuyContentRender = (record, unitId) => (
    <span className={styles[getRollClass(record[`${unitId}_lockedType`], 'buy')]}>
      {record[`${unitId}_buyLimit`]}
    </span>
  );

  const tableSellContentRender = (record, unitId) => (
    <span className={styles[getRollClass(record[`${unitId}_lockedType`], 'sell')]}>
      {record[`${unitId}_sellLimit`]}
    </span>
  );

  const getRollClass = (lockedType, type) => {
    switch (lockedType) {
      case LOCKED_TYPE.SELL:
        return type === 'sell' ? 'redBackground' : '';
      case LOCKED_TYPE.BUY:
        return type === 'buy' ? 'greenBackground' : '';
      default:
        return '';
    }
  };

  return (
    <>
      <Table
        loading={loading}
        className={styles.table}
        dataSource={dataSource}
        locale={tableLocale}
        rowKey="hourOrder"
        bordered={true}
        pagination={false}
        scroll={{ x: true }}
      >
        <Column
          title="时点"
          align="center"
          dataIndex="hourOrder"
          key="hourOrder"
          width={76}
          fixed="left"
        />
        {columnData?.map(({ unitTitle, unitId }) => (
          <ColumnGroup title={unitTitle} key={unitId}>
            <Column
              title="买入"
              className={styles.stationsColumn}
              dataIndex={unitId + '_buyLimit'}
              key={unitId + '_buyLimit'}
              align="center"
              render={(text, record) => tableBuyContentRender(record, unitId)}
            />
            <Column
              title="卖出"
              className={styles.stationsColumn}
              dataIndex={unitId + '_sellLimit'}
              key={unitId + '_sellLimit'}
              align="center"
              render={(text, record) => tableSellContentRender(record, unitId)}
            />
          </ColumnGroup>
        ))}
      </Table>
    </>
  );
};

export default connect(
  ({ rollingBatch: { unitPowerLimitList } }) => ({ unitPowerLimitList }),
  null,
  null,
  { forwardRef: true },
)(TableLimitStatus);
